<!--
 * @Author: yanjikun
 * @Date: 2022-05-20 10:25:53
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-20 11:41:33
 * @Description: file content
-->

<script lang="tsx">
  import BasicHelp from '@/components/BasicHelp'
  import { getSlot } from '@/hooks/helper/tsxHelper'
  import { computed } from '@vue/reactivity'
  import { Divider } from 'ant-design-vue'
  import { defineComponent, unref } from 'vue'
  import { basicCardProps } from './basic-card'

  export default defineComponent({
    name: 'BasicCard',
    props: basicCardProps,
    components: {
      Divider,
      BasicHelp,
    },
    setup(props, { slots }) {
      const getBasicHelpProps = computed(() => {
        return { ...props.helpObject, text: props.helpMessage }
      })
      return () => (
        <div class="basic-card">
          <div>
            <Divider class="basic-card-divider">
              {getSlot(slots, 'title') ?? props.title}
              {props.showHelp && <BasicHelp {...unref(getBasicHelpProps)}></BasicHelp>}
            </Divider>
          </div>
          <div class="base-card-content">{getSlot(slots)}</div>
        </div>
      )
    },
  })
</script>

<style scoped lang="less">
  .basic-card {
    padding: 16px;
    display: flex;
    flex-direction: column;

    .basic-card-divider {
      margin: 0px;
    }

    .base-card-content {
      flex: 1;
    }
  }
</style>
